<template>
  <div class="login_main">
    <head-top head-title="登录" hidden='true'></head-top>
    <div class="login_box">
      <div class="login_header">
        <img src="./image/touxiang@2x.png" alt="">
        <p>业主在线</p>
      </div>
      <ul>
        <li class="li_li border-bottom">
          <span>手机号码：</span>
          <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model.trim="phoneNumber" autocomplete="on">
        </li>
        <li class="li_li border-bottom teshu">
          <span>验 证 码&nbsp;：</span>
          <input class="code_input" type="tel" placeholder="请输入验证码" v-model.trim="codeNumber" maxlength="4">
          <div class="btn">
            <mt-button @click="getCode" type="primary" :disabled="time ==0 || time==60 ? false : true ">
              <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
              <span v-show="!sendMsgDisabled">{{msg}}</span>
            </mt-button>
          </div>
        </li>
      </ul>
      <div class="btn_row" @click="loginBtn">
        <button>
          <span>立即登录</span>
        </button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .login_main {
    width: 100%;
    padding-top: 40px;
    .login_box {
      width: 100%;
      .login_header {
        text-align: center;
        img {
          width: 100px;
          padding: 40px 0 20px 0;
        }
        p {
          font-size: 17px;
        }
      }
      ul {
        padding: 40px 10px 0px 10px;
        .li_li {
          font-size: 1.3em;
          height: 48px;
          line-height: 48px;
          position: relative;
          width: 100%;
          span {
            &.span-color {
              font-size: 1.3rem;
              color: #888;
            }
          }
          input {
            width: 42%;
            border: none;
            outline: none;
            font-size: 1.2rem;
            color: #888;
            &.code_input {
              width: 30%;
            }
          }
          &.teshu {
            span {
              flex: 0 0 80px;
            }
            .code_input {
              /*flex: 1;*/
              padding: 0;
              height: 44px;
              line-height: 47px;
            }
            .btn {
              text-align: center;
              float: right;
              .mint-button--primary {
                color: #0078de;
                border-radius: 30px;
                font-size: 14px;
                background: #f2f2f2;
              }
            }
          }
        }
      }
      .btn_row {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
        button {
          width: 90%;
          height: 44px;
          background: #0078de;
          outline: none;
          border: none;
          border-radius: 5px;
          margin-top: 20px;
          span {
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import {Toast} from 'mint-ui'
  import {getLoginCode, getLogin} from '../../api/login'
  import {IsWeiXin} from '../../common/js/isWeixin'
  import {
    saveUserId,
    savePhoneName,
    saveOpenId,
    saveTIME,
    saveCity,
    saveTitle,
    saveVillageId,
    saveCityId,
    loadOpenId,
    loadUserId,
    loadPhoneName,
    loadTIME
  } from '../../common/js/cache'

  export default {
    data() {
      return {
        phoneNumber: '', // 存放电话号码
        msg: '获取验证码',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,   // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
        codeNumber: '', // 验证码
        openId: '', // openid
        userId: '', // userid
        phone: '', // 电话号码
        rName: '', // 真实姓名
        aresid: '',
        city: '', // 城市名
        cityid: '', // 城市id
        title: '', // 小区名
        villageid: '', // 小区id
        time_stamp: '' // 获取当前时间戳用于跟缓存时间戳进行判断
      }
    },
    created() {
      // 接收query传值
      if (this.$route.query.id) {
        this.aresid = this.$route.query.id
      }
      this.time_stamp = new Date().getTime()
      if (IsWeiXin() && (loadTIME() !== undefined)) {
        if (loadUserId() && loadOpenId() && loadPhoneName().phone && ((loadTIME() + 604800000) > this.time_stamp)) {
          // this.$router.push('/home')
          window.location.replace('/home')
        }
      }
      // console.log(this.aresid)
      // 本地显示的时候跳转到首页，不会显示到登录页面
      if (window.location.href.indexOf('http://localhost') === 0 || window.location.href.indexOf('http://192.168.0') === 0) {
        saveOpenId('oHVoI1YSCHpddlq7bEXa62gcdbTA')
        saveUserId(888)
        saveTIME(new Date().getTime())
        this.$router.push('/home')
      }
    },
    methods: {
      getCode() {
        if (this.phoneNumber.length !== 11 && (typeof this.phoneNumber) !== Number) {
          Toast({
            message: '手机号码格式不对',
            position: 'middle',
            duration: 1000
          })
          return
        } else {
          getLoginCode(this.phoneNumber).then(res => {
            this.repeatNumber = res.code
            if (res.code === 400) {
              this.showCode = false
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              window.clearInterval(interval)
            }
          })
          let me = this
          me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
          let interval = window.setInterval(function () {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
            me.msg = '重新获取'
          }, 1000)
        }
      },
      loginBtn() {
        if (!this.phoneNumber.length) {
          Toast({
            message: '电话号码必填',
            position: 'middle',
            duration: 1500
          })
          return
        }
        if (!this.codeNumber) {
          Toast({
            message: '验证码必填',
            position: 'middle',
            duration: 1500
          })
          return
        }
        getLogin(this.phoneNumber, this.codeNumber, this.aresid).then(res => {
          // console.log(res)
          if (res.code === 200) {
            // 判断openid是否为空，不为空就存起来
            if (res.data.info.open_id !== '') {
              this.openId = res.data.info.open_id // openID
              // 是微信浏览器才存openID到缓存里
              if (IsWeiXin()) {
                saveOpenId(this.openId)
              }
            }
            this.userId = res.data.info.id
            saveUserId(this.userId)
            // 判断真实姓名是否为空，不为空就存
            if (res.data.real_name !== '') {
              this.rName = res.data.info.real_name
            }
            this.phone = res.data.info.phone
            // 存放真实姓名和电话号码
            const PandN = {
              phone: this.phone,
              name: this.rName
            }
            savePhoneName(PandN)
            if (!IsWeiXin()) {
              saveTIME(new Date().getTime()) // 存储时间用于判断是否过期
            }
            // 存城市信息
            if (res.data.city) {
              this.city = res.data.city.city// 城市名
              saveCity(this.city)
              this.cityid = res.data.city.cityid// 城市id
              saveCityId(this.cityid)
              this.title = res.data.city.title// 小区名
              saveTitle(this.title)
              this.villageid = res.data.city.villageid // 小区id
              saveVillageId(this.villageid)
            }
            Toast({
              message: '登录成功',
              position: 'middle',
              duration: 1500
            })
            setTimeout(() => {
              // this.$router.push('/home')
              window.location.replace('/home')
            }, 1000)
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>
